import React from 'react';
import { connect } from 'react-redux';

import { Tooltip } from 'antd';
import List from './list';
import CommonListsIndex from '../../../../components/CommonLists/index';
import FilterTool from '../../../../components/FilterTool';
import services from '../../../../services/api';

@connect(mapStateToProps)
class TaskCaseListIndex extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'caseList';
    this.listsComponent = List;
    this.model_width = 400;
    this.state = {
      ...this.state,
      caseTypes: []
    };
    this.otherParams = {
      case_category_id: props.match.params.id
    };
  }
  componentDidMount() {
    this.getAppCodeList();
    this.getProductCodeList();
    this.getCaseTypeList();
  }

  // 筛选列表，含参数
  freshQueryList = () => {
    this.queryList({ ...this.otherParams, ...this.queryParams, ...this.queryTableParams, ...this.queryPanigation });
  };

  getCaseTypeList = () => {
    services.caseApi.type().then(res => {
      if (res.code === 0) {
        this.setState({
          caseTypes: res.data
        });
      }
    });
  };

  getColumns = () => {
    return [
      {
        title: '请求ID',
        key: 'request_id',
        dataIndex: 'request_id',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '发生时间',
        key: 'request_time',
        dataIndex: 'request_time',
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle('评估结果', this.props.risk_level, 'risk_level', this.refreshTableFilter, [
              'key',
              'value'
            ])}
          </>
        ),
        key: 'risk_level',
        dataIndex: 'risk_level',
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle('所属渠道', this.state.applications, 'app_id', this.refreshTableFilterWithAppV2.bind(this, 'app_id'), [
              'app_id',
              'app_name'
            ])}
          </>
        ),
        key: 'app_name',
        dataIndex: 'app_name',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: (
          <>
            {this.getFilterTitle('关联产品', this.state.products, 'product_id', this.refreshTableFilterWithAppV2.bind(this, 'product_id'), [
              'product_id',
              'product_name'
            ])}
          </>
        ),
        key: 'product_name',
        dataIndex: 'product_name',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: (
          <>
            {this.getFilterTitle('关联事件', this.state.events, 'event_id', this.refreshTableFilterWithAppV2.bind(this, 'event_id'), [
              'event_id',
              'event_name'
            ])}
          </>
        ),
        key: 'event_name',
        dataIndex: 'event_name',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        // title: (
        //   <>
        //     {this.getFilterTitle(
        //       '状态',
        //       [
        //         {
        //           value: 1,
        //           name: '待核查'
        //         },
        //         {
        //           value: 2,
        //           name: '已分配'
        //         },
        //         {
        //           value: 3,
        //           name: '已结案'
        //         }
        //       ],
        //       'status',
        //       this.refreshTableFilter,
        //       ['value', 'name']
        //     )}
        //   </>
        // ),
        title: '状态',
        key: 'status',
        dataIndex: 'status',
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: '核查人',
        key: 'case_end_user_name',
        dataIndex: 'case_end_user_name',
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: '结案时间',
        key: 'case_end_time',
        dataIndex: 'case_end_time',
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: '案件分类',
        // title: (
        //   <>
        //     {this.getFilterTitle('案件分类', this.state.caseTypes, 'category_id', this.refreshTableFilter, [
        //       'case_category_id',
        //       'case_category_name'
        //     ])}
        //   </>
        // ),
        key: 'case_category_name',
        dataIndex: 'case_category_name',
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      }
    ];
  };

  render() {
    const ListsComponent = this.listsComponent;
    const data = [
      {
        type: 'Search',
        key: 'request_id',
        name: 'request_id',
        defaultValue: '',
        placeholder: '请输入请求ID进行搜索',
        span: 16
      }
    ];
    return (
      <div>
        <div className='flex flex-start'>
          <div className='flex-right-wp'>
            <FilterTool
              ref='filterTool'
              data={data}
              colNum={1}
              query={this.freshQueryList}
              refreshFilter={this.refreshFilter}
              refresh={this.resetList}
              isOnChange={true}
            />
          </div>
        </div>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.state}
            mediator={this}
            edit={this.edit}
            showDetail={this.showDetail}
            onChangePagination={this.onChangePagination}
            queryList={this.freshQueryList}
            columns={this.getColumns()}
            rowKey='case_id'
            case_category_id={this.props.match.params.id}
          />
        </div>
      </div>
    );
  }
}
function mapStateToProps(state) {
  return {
    risk_level: state.code.risk_level || []
  };
}

export default TaskCaseListIndex;
